<template>
  <div>
    <MglGeojsonLayer
      :sourceId="geo.geoJsonSource.id"
      :source="geo.geoJsonSource.source"
      :layer="geo.geoJsonLayer"
      :layerId="geo.layerId"
    ></MglGeojsonLayer>
    <MglMarker :coordinates="iconCoors">
      <div slot="marker">
        <span class="iconfont">
          <i class="iconfont icon-marker" style="z-index:999"></i>
        </span>
      </div>
    </MglMarker>
  </div>
</template>

<script>
import { MglMarker, MglGeojsonLayer, MglPopup } from "vue-mapbox";
import _ from "lodash";
import "@/assets/iconfont/iconfont.css";
import { mapGetters } from "vuex";

export default {
  name: "",
  props: {},
  data() {
    return {
      geo: {
        geoJsonSource: {
          id: "linelayer1",
          source: {
            type: "geojson",
            data: {
              type: "Feature",
              properties: {},
              geometry: {
                type: "LineString",
                coordinates: [
                  [121.52792994063162, 31.21669976798036],
                  [121.5278303783237, 31.21704536401083],
                  [121.52777766886766, 31.217220665862243],
                  [121.52852145787409, 31.217476105120852],
                  [121.52918325439282, 31.217736552281835],
                  [121.52923596385051, 31.21787178417837],
                  [121.52883771461677, 31.21863809460659]
                ]
              }
            }
          }
        },
        geoJsonLayer: {
          type: "line",
          paint: {
            "line-color": "rgb(0,255,0)",
            "line-width": 5
          }
        },
        layerId: "linelayer",
        id: "line1"
      },
      iconCoors: [121.52792994063162, 31.21669976798036]
    };
  },
  components: {
    MglMarker,
    MglGeojsonLayer
  },
  methods: {},
  computed: {
    ...mapGetters(["carPoint"])
  },
  watch: {
    carPoint: function(val) {
      this.iconCoors = val;
    }
  }
};
</script>
